import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Tooltip, Modal, Form, Input, InputNumber, DatePicker, message } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import DataDisplayCard from './DataDisplayCard';
import { TrophyTwoTone, DashboardTwoTone, DollarTwoTone } from '@ant-design/icons';
import type { ExcRateType } from './data';
import { getExcRate, excDisturbFactor, activate } from './service'


const ExchangeRateTop = () => {
  // 表单绑定
  const [editFrom] = Form.useForm()
  // 修改模态框
  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
  // 生效模态框
  const [isEffectModalVisible, setIsEffectModalVisible] = useState(false);
  // 当前汇率信息
  const [excRate, setExcRate] = useState<ExcRateType | undefined>()

  useEffect(() => {
    getNowExcRate()
  }, [])

  // 获取当前汇率信息
  const getNowExcRate = async () => {
    let res = await getExcRate({})
    console.log('获取当前汇率信息', res);
    setExcRate(res.body)
  }
  // 修改扰动因子
  const edit = () => {
    editFrom.setFieldsValue({
      disturbFactor: excRate?.disturbFactor,
      updatedBy: JSON.parse(localStorage.getItem('userInformation')).sysUser.empName
    })
    setIsEditModalVisible(true)
  }

  // 修改确认回调
  const handleEditCancel = () => {
    // 表单验证
    editFrom.validateFields().then(async () => {
      // 获取新增表单的值
      var response = editFrom.getFieldsValue()
      console.log(response);
      let res = await excDisturbFactor(response)
      console.log('修改', res);
      setExcRate(res.body)
      setIsEditModalVisible(false);
    })
  };

  // 生效按钮
  const effect = () => {
    setIsEffectModalVisible(true)
  }

  // 确认生效按钮
  const handleEffectCancel = async () => {
    let res = await activate({})
    console.log('生效', res);
    if (res.body.code === '000000') {
      setIsEffectModalVisible(false)
      message.success('汇率生效成功')
    } else {
      message.info('汇率生效失败')
    }
  };

  return (
    <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
      <Col xs={24} sm={24} md={12} lg={12} xl={6}>
        <DataDisplayCard
          title="和平币发行量(M)"
          data={excRate?.curCcyQty}
          company="单位:HPC"
          date={
            <Row>
              <Col span={18}>
                <div style={{ display: 'inline-block' }}>
                  数据来源:
                </div>
                <div style={{ display: 'inline-block' }}>
                  {excRate?.preDate}
                </div>
              </Col>
            </Row>
          }
          explain="指标说明"
          icon={<TrophyTwoTone style={{ fontSize: 50 }} />}
        />
      </Col>
      <Col xs={24} sm={24} md={12} lg={12} xl={6}>
        <DataDisplayCard
          title="流通速度(V)"
          data={excRate?.velOfCirc}
          company="单位:笔/天"
          date={
            <Row>
              <Col span={18}>
                <div style={{ display: 'inline-block' }}>
                  数据来源:
                </div>
                <div style={{ display: 'inline-block' }}>
                  {excRate?.preDate}
                </div>
              </Col>
            </Row>
          }
          explain="指标说明"
          icon={<DashboardTwoTone style={{ fontSize: 50 }} />}
        />
      </Col>
      <Col xs={24} sm={24} md={12} lg={12} xl={6}>
        <DataDisplayCard
          title="商品价值量(Q)"
          data={excRate?.totalValueOfComm}
          company="单位:CAD"
          date={
            <Row>
              <Col span={18}>
                <div style={{ display: 'inline-block' }}>
                  数据来源:
                </div>
                <div style={{ display: 'inline-block' }}>
                  {excRate?.preDate}
                </div>
              </Col>
            </Row>
          }
          explain="指标说明"
          icon={<DollarTwoTone style={{ fontSize: 50 }} />}
        />
      </Col>
      {/* 单独的生效修改 */}
      <Col xs={24} sm={24} md={12} lg={12} xl={6}>
        <Card
          bodyStyle={{ padding: 20 }}
        >
          {/* 顶部标题 */}
          <div style={{ position: 'relative' }}>
            <span style={{ color: '#777', }}>
              汇率(R):M*V/Q</span>
            <span style={{ color: '#777', position: 'absolute', right: 0 }}>
              <Tooltip title="指标说明">
                <InfoCircleOutlined />
              </Tooltip>
            </span>
          </div>
          {/* 数字显示区域 */}
          <div style={{ fontSize: 30, height: 50 }}>
            <span>{excRate?.exchangeRate}</span>
          </div>
          <Row justify="space-between" style={{ paddingBottom: 8 }}>
            <Col span={18}>
              <span>扰动因子(I): </span>
              <span style={{ fontSize: 14, color: 'green' }}>{excRate?.disturbFactor}</span>
            </Col>
            <Col span={6} style={{ textAlign: 'right' }}>
              <a onClick={edit}>修改</a>
            </Col>
          </Row>
          <Row style={{ paddingTop: 8, borderTop: "1px solid #f0f0f0" }}>
            <Col span={18}>
              <div style={{ display: 'inline-block' }}>
                生效时间:
              </div>
              <div style={{ display: 'inline-block' }}>
                {excRate?.curDate}
              </div>
            </Col>
            <Col span={6} style={{ textAlign: 'right' }}>
              <a onClick={effect}>生效</a>
            </Col>
          </Row>
        </Card>
      </Col>
      {/* 修改的模态框 */}
      <Modal
        title="扰动因子(I)"
        visible={isEditModalVisible}
        centered
        onOk={handleEditCancel}
        onCancel={() => { setIsEditModalVisible(false) }}
        cancelText="取消"
        okText="确定"
        width={900}
      >
        {/* 修改表单 */}
        <Form
          form={editFrom}
          name="basic"
          labelCol={{ span: 8 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Row>
            <Col span={8}>
              <Form.Item
                label="扰动因子(I)"
                name="disturbFactor"
                rules={[{
                  required: true,
                  message: '请输入!'
                }]}
              >
                <InputNumber maxLength={4} style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="修改者"
                name="updatedBy"
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      {/* 生效的模态框 */}
      <Modal
        title="确认生效当前汇率"
        visible={isEffectModalVisible}
        centered
        onOk={handleEffectCancel}
        onCancel={() => { setIsEffectModalVisible(false) }}
        cancelText="取消"
        okText="确定"
      >
        汇率P=(M*V/Q)*I=
        ({excRate?.curCcyQty}*{excRate?.velOfCirc}/{excRate?.totalValueOfComm})*
        {excRate?.disturbFactor}={excRate?.exchangeRate}
      </Modal>
    </Row >
  );
};
export default ExchangeRateTop;
